<!-- broken.vue -->
<template>
    <div ref="chartRef" style="width: 420px; height: 270px;top: -50px;left: -20px;"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
    options: {
        type: Object,
        required: true
    }
})

const chartRef = ref()
let chartInstance = null

onMounted(() => {
    chartInstance = echarts.init(chartRef.value)
    chartInstance.setOption(props.options)
})

watch(() => props.options, (newVal) => {
    chartInstance?.setOption(newVal)
}, { deep: true })
</script>